/* 基础样式 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* 颜色定义 */
:root {
	--primary: #FFD700;
	--primary-dark: #FFC000;
	--accent: #FFA500;
	--accent-dark: #FF8C00;
	--neutral: #F5F5DC;
	--white: #FFFFFF;
	--gray-light: #F3F4F6;
	--gray: #E5E7EB;
	--gray-dark: #6B7280;
	--success: #22C55E;
	--error: #EF4444;
}

/* 背景装饰元素 */
.bg-decor {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.1;
	z-index: 0;
}

.bg-decor-1 {
	top: -20%;
	right: -20%;
	width: 400px;
	height: 400px;
	background-color: var(--primary);
	animation: float 6s ease-in-out infinite;
}

.bg-decor-2 {
	bottom: -20%;
	left: -20%;
	width: 400px;
	height: 400px;
	background-color: var(--accent);
	animation: float 6s ease-in-out infinite 2s;
}

.bg-decor-3 {
	top: 30%;
	left: -10%;
	width: 200px;
	height: 200px;
	background-color: var(--primary);
	animation: float 5s ease-in-out infinite 1s;
}

.bg-decor-4 {
	bottom: 30%;
	right: -10%;
	width: 200px;
	height: 200px;
	background-color: var(--accent);
	animation: float 5s ease-in-out infinite 3s;
}

/* 注册卡片 */
.register-container {
	max-width: 480px;
	width: 100%;
	z-index: 1;
	margin-top: 0px;
}

.register-card {
	background-color: var(--white);
	border-radius: 24px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transform: translateY(20px);
	opacity: 0;
	transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.register-card.loaded {
	transform: translateY(0);
	opacity: 1;
}
.sign2.loaded{
	transform: translateY(0);
	opacity: 1;
}
.sign2.unLoaded{
	transform: translateY(20);
	opacity: 0;
}
.register-card.unLoaded {
	transform: translateY(20px);
	opacity: 0;
}

/* 头部区域 */
.register-header {
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: white;
	padding: 20px;
	padding-bottom: 10px;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin-bottom: -25px;
}

.register-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
	opacity: 0.2;
}

.register-header h1 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 8px;
	position: relative;
}

.register-header p {
	opacity: 0.9;
	font-size: 0.95rem;
	position: relative;
}

/* 表单区域 */
.form-container {
	padding: 20px;
}

/* 头像区域 */
.avatar-container {
	position: relative;
	margin: 0 auto 10px;
	width: 120px;
	height: 120px;
}

.avatar-placeholder {
	position: absolute;
	inset: 0;
	background-color: var(--neutral);
	border-radius: 50%;
	border: 3px solid var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--primary);
	opacity: 1;
	transition: opacity 0.3s ease;
	cursor: pointer;
}

.avatar-image {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid var(--primary);
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-loaded .avatar-placeholder {
	opacity: 0;
}

.avatar-loaded .avatar-image {
	opacity: 1;
}

/* 响应消息 */
.response-message {
	margin-bottom: 5px;
	padding: 12px 16px;
	border-radius: 12px;
	text-align: center;
	font-weight: 500;
	opacity: 0;
	transform: scale(0.95);
	transition: all 0.3s ease;
	font-size: 0.9rem;
}

.response-message.show {
	opacity: 1;
	transform: scale(1);
}

.response-message.success {
	background-color: rgba(34, 197, 94, 0.1);
	color: var(--success);
}

.response-message.error {
	background-color: rgba(239, 68, 68, 0.1);
	color: var(--error);
}

/* 表单组 */
.form-group {
	margin-bottom: 18px;
}

.form-group label {
	display: block;
	color: var(--gray-dark);
	font-weight: 500;
	margin-bottom: 8px;
	font-size: 0.95rem;
}

.input-wrapper {
	position: relative;
}

.input-icon {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-dark);
	font-weight: bold;
}

.form-control {
	width: 100%;
	padding: 12px 14px 12px 44px;
	border: 1px solid var(--gray);
	border-radius: 12px;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	background-color: var(--gray-light);
}

.form-control:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
	background-color: var(--white);
}

.password-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-dark);
	cursor: pointer;
	transition: color 0.2s ease;
	font-weight: bold;
}

.password-toggle:hover {
	color: var(--accent);
}

/* 上传按钮 */
.upload-btn {
	display: block;
	width: 100%;
	padding: 12px;
	border: 2px dashed #ddd;
	border-radius: 8px;
	background: #f9f9f9;
	color: #777;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.upload-btn:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
	background-color: var(--white);
}

/* 注册按钮 */
.register-btn {
	width: 100%;
	padding: 16px;
	background: linear-gradient(135deg, var(--primary), var(--accent));
	color: white;
	border: none;
	border-radius: 12px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(255, 165, 0, 0.2);
}

.register-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(255, 165, 0, 0.3);
}

.register-btn:active {
	transform: translateY(0);
}

.register-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none !important;
}

/* 登录链接 */
.login-link {
	text-align: center;
	color: var(--gray-dark);
	font-size: 0.95rem;
}

.login-link a {
	color: var(--primary);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.login-link a:hover {
	color: var(--accent-dark);
	text-decoration: underline;
}

/* 动画 */
@keyframes float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-5px);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(5px);
	}
}

.shake {
	animation: shake 0.5s ease-in-out;
}

.success-glow {
	animation: successGlow 1.5s ease-in-out;
}

@keyframes successGlow {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.3);
	}

	50% {
		box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
	}
}

/* 加载动画 */
.spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	border-top-color: white;
	animation: spin 1s ease-in-out infinite;
	margin-right: 8px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 状态指示器 */
.status-indicator {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}

.status-text {
	vertical-align: middle;
	font-size: 0.85rem;
	color: var(--gray-dark);
}

}